<template>
  <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      label-width="120px"
      :rules="rules">
    <el-form-item label="产品图片" prop="productImage">
      <el-upload action="#" list-type="picture-card" :auto-upload="false" :on-change="(uploadFile, uploadFiles) => handleChange(uploadFile, uploadFiles, 'productImage')">
        <el-icon><Plus /></el-icon>

        <template #file="{ file }">
          <div>
            <img class="el-upload-list__item-thumbnail" :src="ruleForm.productImage" alt="" />
            <span class="el-upload-list__item-actions">
              <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file, 'productImage')"
              >
                <el-icon><zoom-in /></el-icon>
              </span>
              <!--<span-->
              <!--    v-if="!disabled"-->
              <!--    class="el-upload-list__item-delete"-->
              <!--    @click="handleDownload(file, 'businessLicence')"-->
              <!--&gt;-->
              <!--  <el-icon><Download /></el-icon>-->
              <!--</span>-->
              <!--<span-->
              <!--    class="el-upload-list__item-delete"-->
              <!--    @click="handleRemove(file, 'businessLicence')"-->
              <!--&gt;-->
              <!--  <el-icon><Delete /></el-icon>-->
              <!--</span>-->
            </span>
          </div>
        </template>
      </el-upload>
    </el-form-item>
    <el-form-item label="产品视频" prop="productVideo">
      <el-upload action="#" list-type="picture-card" :auto-upload="false" :on-change="(uploadFile, uploadFiles) => handleChange(uploadFile, uploadFiles, 'productVideo')">
        <el-icon><Plus /></el-icon>

        <template #file="{ file }">
          <div>
            <img class="el-upload-list__item-thumbnail" :src="ruleForm.productVideo" alt="" />
            <span class="el-upload-list__item-actions">
              <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file, 'productVideo')"
              >
                <el-icon><zoom-in /></el-icon>
              </span>
              <!--<span-->
              <!--    v-if="!disabled"-->
              <!--    class="el-upload-list__item-delete"-->
              <!--    @click="handleDownload(file, 'authorize')"-->
              <!--&gt;-->
              <!--  <el-icon><Download /></el-icon>-->
              <!--</span>-->
              <!--<span-->
              <!--    class="el-upload-list__item-delete"-->
              <!--    @click="handleRemove(file, 'authorize')"-->
              <!--&gt;-->
              <!--  <el-icon><Delete /></el-icon>-->
              <!--</span>-->
            </span>
          </div>
        </template>
      </el-upload>
    </el-form-item>
    <!--<el-form-item label="企业注册号" prop="idRegisterNumber" v-if="['enterprise', 'cooperative'].includes(ruleForm.accountType)">-->
    <!--  <el-input v-model="ruleForm.idRegisterNumber" placeholder="企业注册号由15位或18位字符组成" />-->
    <!--</el-form-item>-->
  </el-form>
  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue'
import type { FormInstance, FormRules, UploadFile, UploadProps } from 'element-plus'
import { ElMessage } from 'element-plus'
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
const ruleFormRef = ref<FormInstance>()

const ruleForm = reactive({
  productImage: '', // 产品图片
  productVideo: '', // 产品视频
})

const rules = reactive<FormRules<typeof ruleForm>>({
  productImage: [
    { required: true, message: '请上传产品图片', trigger: 'change' },
  ],
  productVideo: [
    { required: false, message: '请上传产品视频', trigger: 'change' },
  ],
})

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handlePictureCardPreview = (file: UploadFile, type: string) => {
  ruleForm[type] = file.url!
  dialogImageUrl.value = file.url!
  dialogVisible.value = true
}

const handleDownload = (file: UploadFile, type: string) => {
  console.log(file)
}

const handleRemove = (file: UploadFile, type: string) => {
  ruleForm[type] = '';
  dialogImageUrl.value = ''
  dialogVisible.value = false
}

const handleChange: UploadProps['onChange'] = (uploadFile, uploadFiles, type) => {
  // fileList.value = fileList.value.slice(-3)
  ruleForm[type] = uploadFile.url;
  ruleFormRef.value?.validateField(type)
}
defineExpose({
  ruleFormRef,
  ruleForm,
  rules,
})
</script>

<style lang="scss" scoped>
::v-deep .avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

::v-deep .avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

::v-deep .el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
